<template>
  <div class="chatbox">
    <div class="topbox" id="topbox">
      <div class="chatlist" v-for="(v, i) in chatdata" :key="v">
        <img :src="v.img" alt="" class="headphoto" />：
        <div class="text">{{ v.text }}</div>
      </div>
      <div v-if="loading" id="circle2"></div>
      <div id="infobox" v-if="isinfo" style="text-align: center">
        {{ divinfo }}
      </div>
    </div>
    <div class="buttombox">
      <textarea
        id="textbox"
        v-model.trim="textdata"
        placeholder="请输入..."
      ></textarea>
      <svg
        data-v-dcaffe7a=""
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1024 1024"
        @click="submit"
      >
        <path
          fill="currentColor"
          d="m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472zm256 512V657.024L512 768z"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getAidata } from "@/api/dialogAI";

const chatdata = ref([]);
const isinfo = ref(true);
const textdata = ref();
const divinfo = ref("暂无信息");
const flag = ref(true);
const loading = ref(false);

function submit() {
  if (flag.value) {
    if (!textdata.value) {
      const infobox = document.getElementById("infobox");
      infobox.style.color = "red";
      infobox.style.fontSize = "16px";
      divinfo.value = "请输入你的问题";
      setTimeout(() => {
        let div = document.getElementById("topbox");
        div.scrollTop = div.scrollHeight + 50;
      }, 0);
    } else {
      flag.value = false;
      loading.value = true;
      getAidata(textdata.value).then((res) => {
        if (res.code == 200) {
          const textdata = res.data;
          loading.value = false;
          chatdata.value.push({
            isuser: false,
            img: "/src/assets/jqr.png",
            text: "",
          });
          const idx = textdata.length - 1;
          let i = 0;
          const timer = setInterval(() => {
            if (i <= idx) {
              chatdata.value[chatdata.value.length - 1].text =
                chatdata.value[chatdata.value.length - 1].text + textdata[i];
              let div = document.getElementById("topbox");
              div.scrollTop = div.scrollHeight + 50;
            } else {
              clearInterval(timer);
              setTimeout(() => {
                let div = document.getElementById("topbox");
                div.scrollTop = div.scrollHeight + 50;
                flag.value = true;
              }, 0);
            }
            i++;
          }, 60);
        }
      });
      const userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
      chatdata.value.push({
        isuser: true,
        img: userinfo.headphoto,
        text: textdata.value,
      });
      divinfo.value = "";
      textdata.value = "";
      setTimeout(() => {
        let div = document.getElementById("topbox");
        div.scrollTop = div.scrollHeight + 50;
      }, 0);
    }
  } else {
  }
}
</script>

<style lang="scss" scoped>
.chatbox {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  //   background-color: red;
  .topbox {
    width: 100%;
    height: 83%;
    // background-color: rgb(173, 173, 173);
    padding: 20px;
    overflow-y: auto;
    margin-bottom: 3%;
    .chatlist {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
      background-color: #efefef;
      padding: 10px;
      border-radius: 5px;
      .headphoto {
        width: 40px;
        height: 40px;
        margin-right: 5px;
      }
      .text {
        word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
        // text-overflow: ellipsis; // 溢出用省略号显示
        // overflow: hidden; // 超出的文本隐藏
        display: -webkit-box; // 作为弹性伸缩盒子模型显示
        // -webkit-line-clamp: 3; // 显示的行
        -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
      }
      span {
        position: absolute;
        right: 0;
      }
    }
  }
  .buttombox {
    border-top: 2px solid #ddd;
    width: 100%;
    height: 15%;
    // background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    padding-left: 10%;
    padding-top: 2%;

    textarea {
      font-size: 18px;
      width: 80%;
      height: 100%;
      border-radius: 5px;
      resize: none;
      background-color: #efefef;
      border: 0;
    }

    svg {
      width: 35px;
      height: 35px;
    }
  }
}

/**===== circle2 =====*/
#circle2 {
  // display: block;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  margin: 0 auto;
  height: 40px;
  width: 40px;
  // margin: -25px 0 0 -25px;
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px black solid;
  border-radius: 50%;
  -webkit-animation: spin2 1s infinite linear;
  animation: spin2 1s infinite linear;
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
/** END of circle2 */


</style>
